<template>
    <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="list"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
    >
        <template #bodyCell="{ column, text ,record}">
            <template v-if="column.dataIndex === 'event.title'">
                <router-link :to="{ name: 'detail', params: { eventId: record.eventId }}">《{{record.event.title}}》</router-link>
<!--                <a-space>-->
<!--                    <check-circle-two-tone v-if="text == 'Approved'"  two-tone-color="#52c41a" :style="{fontSize: '26px'}" />-->
<!--                    <close-circle-two-tone v-if="text == 'Rejected'"   two-tone-color="#eb2f96" :style="{fontSize: '26px'}" />-->
<!--                    <question-circle-two-tone v-if="text == 'Pending'" :style="{fontSize: '26px'}" />-->
<!--                    {{ text}}-->
<!--                </a-space>-->

            </template>
        </template>
    </a-table>
</template>

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import axios from 'axios'
import { useUserStore } from '../../stores/user';
import {useRouter} from "vue-router";
import {usePagination} from "vue-request";

const userStore  = useUserStore()
const router = useRouter()
const columns = [
//     {
//     title: 'id',
//     dataIndex: 'id',
//     width: '20%',
// },
    {
        title: '评论内容',
        dataIndex: 'content',

    },
    {
        title: '所属事件',
        dataIndex: 'event.title',
        width: '20%',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: '20%',
    }];

const queryData = params => {
    return axios.get('/comment/list', {
        params,
    });
};

const {
    data,
    run,
    loading,
    current,
    pageSize,
} = usePagination(queryData, {
    // formatResult: res => res.data.data.list,
    defaultParams: [
        {
            pageSize: 5,
            userId:userStore.user.id,
            approvalStatus:'all',
        },
    ],
    pagination: {
        currentKey: 'pageNum',
        pageSizeKey: 'pageSize',
    },
});

const list = computed(() => data.value?.data.data.list || []);
const pagination = computed(() => ({
    total: data.value?.data.data.total,
    current: current.value,
    pageSize: pageSize.value,
    pageSizeOptions: ['3', '5', '10']
}));
const handleTableChange = (pag, filters, sorter) => {
    console.log("handleTableChange",filters)
    run({
        pageSize: pag.pageSize,
        pageNum: pag?.current,
        sort: sorter.field,
        order: sorter.order,
        userId:userStore.user.id,
        // ...filters,
    });
};
</script>

<style scoped>

</style>